<template>
    <view>
        <PageHeader>
            <view class="PAGE_TITLE">新闻公告</view>
        </PageHeader>
        <view :class="$style.tabs">
            <view v-for="item in tabs" :key="item.contentid" :class="$style.tab" @tap="toggleTap(item.contentid)">
                <view :class="[$style.title, currentId == item.contentid ? $style.selected : '']">
                    {{ item.title }}
                </view>
            </view>
        </view>
    </view>
    <view :class="$style.news">

        <template v-for="row in newsList" :key="row.id">
            <view :class="$style.item" @tap="nav(row.id)">
                <view :class="$style.icon"></view>
                <view :class="$style.body">
                    <view :class="$style.title">{{ row.title }}</view>
                    <view :class="$style.date">{{ row.date }}</view>
                </view>
            </view>
        </template>

        <!-- <template v-for="row in newsList" :key="row.id">
            <view :class="$style.item" @tap="nav(row.id)">
                <view :class="$style.date">
                    <view :class="$style.dates">
                        <view :class="$style.date">{{ row.month }}</view>
                        <view :class="$style.date">{{ row.day }}</view>
                    </view>
                </view>
                <view :class="$style.body">
                    <view :class="$style.title">{{ row.title }}</view>
                    <view :class="$style.desc">{{ row.summary }}</view>
                </view>
            </view>
        </template> -->
    </view>
    <uni-load-more :status="status"></uni-load-more>
</template>

<script lang="ts" setup>
import PageHeader from '@/components/PageHeader.vue'
//民大要闻treeid=1092&wbcontentid=1074891 媒体民大 treeid=1335&wbcontentid=1074996 学术看点  treeid=1038&wbcontentid=1074865
    import { newsApi, newsPageApi } from '@/api/News';
import { onReachBottom } from '@dcloudio/uni-app';
    import { ref } from 'vue';

    const currentId = ref('1074891')
    const tabs = [{title : '民大要闻', contentid : '1074891'}, {title : '媒体民大', contentid : '1074996'}, {title : '学术看点', contentid : '1074865'}]

    const newsList = ref<any[]>([])

    const status = ref<'more' | 'loading' | 'noMore'>('loading')
    const start = ref(0)
    const count = 20


    function toggleTap(id:string) {
        if(id != currentId.value) {
            start.value = 0
            currentId.value = id
            newsList.value.splice(0)
            page()
        }
    }



    async function page() {
        status.value = 'loading'
        const res = await newsPageApi({start : start.value, count, contentid : currentId.value})
        if(res.data && res.data.length > 0) {
            const data = JSON.parse(res.data)
            if(data) {
                data.forEach(row => {
                    newsList.value.push(row)
                })

                if(data.length < count) {
                    status.value = 'noMore'
                    return
                }

                status.value = 'more'
            }else {
                status.value = 'noMore'
            }

        }else {
            status.value = 'noMore'
        }

        
    }

    async function nav(id) {
        uni.showLoading()
        const r = await newsApi(id)
        uni.hideLoading()
        if(r.data) {
            const data = JSON.parse(r.data)
            location.href = data.wblinkurl
        }
    }


    page()


    onReachBottom(() => {
        if(status.value == 'loading') return
        page()
    })


    

</script>

<style lang="scss" module src="./index.scss"></style>